<!DOCTYPE html>
<html lang="en">
<head>
    <title>功能演示</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta ng-include="'head.html'"> -->
    <style type="text/css">
        .view{ background-color: #fff }
        .H100{ height: 100% }
        .column{ margin-right: 0px }
        .pointer{ cursor: pointer }
        #tb0>tbody>tr>td{ height:20px; line-height: 20px }

    </style>
    <link href="../css/graph-sankey.css" rel="stylesheet" />

    <script src="../lib/js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/build.js" type="text/javascript"></script>
    <script src="../js/public.js" type="text/javascript"></script>
    <script src="https://webapi.amap.com/js/marker.js"></script>
    <!--<script src="//webapi.amap.com/loca?key=17cc15a8dd6241aa1984495c67d70e6f"></script>`-->
    <script src="https://webapi.amap.com/maps?v=1.4.2&key=17cc15a8dd6241aa1984495c67d70e6f"></script>
    <script type="text/javascript" src="../lib/js/bootstrap-select.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-select.min.css">

</head>
<body class="flat-blue" ng-app="myApp" ng-controller="myCtrl">
<div class="app-container H100">
    <div class="row content-container H100">
        <div ng-include="'menus.html'" onload="loadReady()"></div>
        <div class="container-fluid H100">
            <div class="side-body H100 padding-top" id="main" style="padding-top: 55px;">
                <!------------------Main---------------->
                <div class="row" style="background-color: #fff; margin-bottom: 30px; height: 620px">
                    <div style="height: 50px; border-bottom: 1px solid #ccc; padding:10px 30px; font-size: 16px;
                        font-weight: 800; background-color: #fff">班子结构分析 -
                        <span style="font-weight: 100; font-size: 14px"> 某领导班子</span>
                    </div>
                    <div class="view col-md-8 H100" style="" id="viewLH">
                        <div id="node0" style="color:#000; text-align:center; font-size:14px; font-weight:800;margin-bottom:20px;">
                            班子人员列表
                        </div>
                        <table class="table" id="tb0">
                            <thead id="thead0">
                            <tr>
                                <th>姓名</th>
                                <th>姓名</th>
                                <th>关系类型</th>
                                <th>时间</th>
                            </tr>
                            </thead>
                            <tbody id="tbody0">
                            <tr>
                                <td>王某某</td>
                                <td>李某某</td>
                                <td>亲属</td>
                                <td>2012</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="view col-md-4 H100" style="">
                        <div style="color:#000; text-align:center; font-size:14px; font-weight:800;height:20px;">
                            班子各维度评价
                        </div>
                        <div style="height: 600px" id="viewRH"></div>
                    </div>
                </div>
                <div class="row" style="background-color: #fff; margin-bottom: 30px">
                    <div style="height: 100px; background-color: #fff; margin: 0 15px">
                        <div id="orgHead" class="col-md-8 column H100" style="padding-right: 0px">
                        </div>
                        <div class="col-md-4 column" style="padding-right: 0px; text-align: center">
                            <div style="height: 80px; padding-top: 40px"><strong>特定维度分析</strong></div>
                            <div id="title" style="color:blue">性别构成</div>
                        </div>
                    </div>
                    <div class="col-md-8 column" style="padding-right: 0px;">
                        <div class="view" style="height:360px;padding-right: 60px" id="view1">

                        </div>
                        <div class="view" style="height:550px; padding-top:50px; width: 100%">
                            <div style="height: 30px; z-index: 99; ">
                                <div style="float: right; padding-right: 50px;" id="lbChange">
                                    <span class="label label-info pointer">方式一</span>
                                    <span class="label label-default pointer">方式二</span>
                                </div>
                            </div>
                            <div id="view2" style="height: 520px; padding-bottom: 30px; background-color: #fff"></div>
                        </div>
                    </div>

                    <div class="col-md-4 column" style="margin-left: 0px; padding-left: 0px;padding-bottom: 30px;; background-color: #fff">
                        <div class="view" style="min-height:360px" id="viewRT">

                        </div>
                        <div class="view" style="min-height:550px;padding-top:50px; background-color: #fff" id="viewRB">
                            <div id="node" style="color:#000; text-align:center; font-size:14px; font-weight:800;margin-bottom:20px;">
                                班子人员关系详情
                            </div>
                            <table class="table" id="tb1">
                                <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>姓名</th>
                                    <th>关系类型</th>
                                    <th>时间</th>
                                </tr>
                                </thead>
                                <tbody id="tbody1">
                                <tr>
                                    <td>王某某</td>
                                    <td>李某某</td>
                                    <td>亲属</td>
                                    <td>2012</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>

                <!------------------End Main---------------------->
            </div>  <!--End side-body-->
        </div>  <!--End container-fluid-->
    </div>  <!--End content-container-->
    <div ng-include="'footer.html'"></div>
</div>  <!--End app-container-->


<div class="modal fade" id="modal-add-person" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">
                    人员选择
                </h4>
            </div>
            <div class="modal-body">

                <div class="eachline">
                    <div class="inputadd1">
                        <div class="inputadd1_1">
                            <label>推荐列表</label>
                        </div>
                        <div class="inputadd1_2">
                            <select id="dataSelect" name="dataid" class="selectpicker show-tick form-control"
                                    data-live-search="true" required>
                                <option value="" disabled>请选择</option>
                            </select>
                        </div>
                    </div>
                    <div style="margin-top: 30px; min-height:150px">
                        <div><em>人员详情：</em><br></div>
                        <div id="selInfo" >
                            <table>
                                <tr><td><strong>姓名：</strong></td><td style="color: blue">{{line[7]}}</td><td><strong>性別：</strong></td><td>{{line[1]}}</td></tr>
                                <tr><td><strong>专业：</strong></td><td>{{line[4]}}</td><td><strong>政治面貌：</strong></td><td>{{line[3]}}</td></tr>
                                <tr><td><strong>工作年限：</strong></td><td>{{line[5]}}</td></tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="changeTeam" >保存</button>
            </div>
        </div>

    </div>

</div>


<script src="../lib/js/echarts.v4.min.js"></script>
<script src="../js/map/yaan.js"></script>
<script src="../lib/js/d3.v3.min.js"></script>
<script src="../lib/js/d3.chart.min.js"></script>
<script src="../lib/js/d3.chart.sankey.chuixue.js"></script>
<script src="../js/graph-team.js"></script>

<script language="javascript">
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        loadCtlBase($scope);
        // 當前選中人員
        $scope.line = [];
        $scope.cacheLines = {};
        addSearchOption($scope);


    });
    var __cols = ['总分', '性别', '年龄', '党派', '专业', '工作年限', '岗位', '编辑'];
    var __dts = [["id", "男", "青", "共产党", "经济学","5年以下",  "县　长", "刘　超"],
        ["id", "男", "青", "共产党", "经济学","5-10年", "副县长", "颜　超"],
        ["id", "男", "青", "共产党", "管理学","5-10年", "副县长", "杨学宁"],
        ["id", "男", "青", "共产党", "管理学","5-10年", "副县长", "王明华"],
        ["id", "男", "青", "共产党", "法学",  "5-10年", "副县长", "经大忠"],
        ["id", "男", "青", "民进党", "法学", "10-15年", "副县长", "孙福全"],
        ["id", "男", "中", "共产党", "法学", "10-15年", "副县长", "韩圣健"],
        ["id", "女", "中", "共产党", "工学", "10-15年", "副县长", "蒋丽英"],
        ["id", "男", "中", "共产党", "工学", "10-15年", "副县长", "罗宗志"],
        ["id", "男", "中", "共产党", "理学", "15-20年", "副县长", "赵迎春"],
        ["id", "男", "老", "共产党", "历史学", "15-20年", "副县长", "罗　蒙"],
        ["id", "男", "老", "九三学社", "农学", "25年以上", "副县长", "谭 岗"],
        ["id", "男", "中", "共产党", "历史学", "20-25年", "县长助理", "张胜"],
        ["id", "男", "老", "农工党", "农学", "20-25年", "县长助理", "文剑"]
    ];
    var __scores = [];

    function setTableAll(){
        var head = "<tr>" + "<td>姓名</td>" + __cols.filter(function(d, i){ return i!=0 && i!=7; })
                        .map(function(d){ return "<th>" + d + "</th>"; }).join("") + "</tr>";
        var body = __dts.map(function(d){ return "<tr>" + "<td>" + d[7] + "</td>" +
                d.filter(function(d, i){ return i!=0 && i!=7; }).map(function(e){ return "<td>" + e + "</td>"; }).join("")
                + "</tr>"; }).join("");
        $("#thead0").html(head);
        $("#tbody0").html(body);
    }

    setTableAll();


    loadGraphAll();


    function loadGraphAll(){
        setLabel();
        drawSanKey("view1", __dts);
        addScore("orgHead", "view1");
        loadGraph(0);
        drawBar("viewRH", function(){
            return __scores.slice(0, -1).map(function(d, i){ return {name: __cols[i], value:d}; });
        }());
        loadItem(2);
        $("#orgHead,.headText").get(8).innerHTML = "编辑";
    }

    $("#changeTeam").click(function(){
        $("#modal-add-person").modal('hide');
        loadGraphAll();

    });

    function loadItem(colIndex){
        var cache = __dts.reduce(function(a, b){
            if(!(b[colIndex] in a))a[b[colIndex]] = [];
            a[b[colIndex]].push(b[7]);
            return a;
        }, {});
        var dt = Object.keys(cache).map(function(k){ return { name:k, value:cache[k].length }; });
        $("#title").text(__cols[colIndex]);
        drawItem("viewRT", dt, cache, __cols[colIndex]);
    }


    function setLabel(){
        var dic = {};
        $("#lbChange>span").each(function(i, d){
            dic[$(d).text()] = i;
        });
        $("#lbChange>span").click(function(d){
            if($(this).hasClass('label-info'))return;
            $(this).removeClass('label-default');
            $(this).addClass('label-info');
            var index = dic[$(this).text()], b = $("#lbChange>span").get(1 - index);
            $(b).removeClass('label-info');
            $(b).addClass('label-default');
            loadGraph(index);
        });
    }


    var source = [
        { names:['硕士以以上', '本科', '专科', '高中'], data: [
            {'name':'县委', 'value':[15, 30, 18, 10]},
            {'name':'县人大', 'value':[5, 40, 38, 15]},
            {'name':'县政府', 'value':[10, 20, 10, 8]},
            {'name':'县政协', 'value':[2, 10, 18, 25]}
        ]},
        { names:['硕士以以上', '本科', '专科', '高中'], data: [
            {'name':'宝兴县', 'value':[15, 30, 18, 10]},
            {'name':'天全县', 'value':[5, 40, 38, 15]},
            {'name':'荥经县', 'value':[10, 20, 10, 8]},
            {'name':'芦山县', 'value':[2, 10, 18, 25]},
            {'name':'汉源县', 'value':[5, 40, 38, 15]},
            {'name':'石棉县', 'value':[10, 20, 10, 8]},
            {'name':'名山区', 'value':[2, 10, 18, 25]},
            {'name':'雨城区', 'value':[15, 30, 18, 10]}
        ]}
    ];


    function loadGraph(index){
        var data = getGraphData(__dts);
        [drawGraphC, drawGraph][index]("view2", data);
    }

    function addSearchOption($scope){
        var data = [
            ["id", "男", "青", "共产党", "经济学","5年以下",  "市　长", "刘超"],
            ["id", "男", "青", "共产党", "经济学","5-10年", "副市长", "颜超"]
        ];
        data.forEach(function(d){
            var option = "<option>"+ [d[7], d[1]].join(' , ') +"</option>";
            $("#dataSelect").append(option);
            $scope.cacheLines[d[7]] = d;
        });
        $scope.line = data[0];
        $('#dataSelect').on('changed.bs.select', function (e, c) {
            var text = $('#dataSelect').val(), name = text.split(",")[0].trim();
            $scope.line = $scope.cacheLines[name];
            $scope.$apply();
        });
    }

    function getScore(){
        __scores = [d(80, 100), 78, d(50), d(50), d(50), d(50), d(50)];
        return __scores;
    }

    function addScore(id, viewId){
        $("#" + id).html("");
        var W = $("#" + viewId).width(), outW = $("#" + viewId).outerWidth() - W,
                H = $("#" + viewId).height(), height = $("#" + id).height();
        var count = 8, barW  = 15, dis = (W - count * barW) / (count - 1);
        var svg = d3.select("#" + id).append("svg").attr('width', W + outW);
        var cols = __cols, data = getScore();
        __scores.push(' + 增加');

        svg.append('g').selectAll("text").data(data).enter().append("text")
                .attr('x', function(d, i){ return (barW + dis) * i; })
                .attr('y', height - 20)
                .style('cursor', 'pointer')
                .text(function(d){ return d; })
                .attr('fill', function(d){ return d<60 ? 'red' : 'blue'; })
                .on('click', function(d, i){
                    if(d!=' + 增加'){
                        loadItem(i);
                    }else{
                        $("#modal-add-person").modal('show');
                    }
                })
        ;
        svg.append('g').selectAll("text").data(cols).enter().append("text")
                .attr('x', function(d, i){ var x = (barW + dis) * i; if(d=='编辑') x+=10; return x; })
                .attr('y', height - 50)
                .attr('class', 'headText')
                .style('cursor', 'pointer')
                .style('font-weight', 800)
                .text(function(d){ return d; })
                .attr('fill', function(d){ return (d=='编辑') ? '#f00' : '#000' })
                .on('click', function(d, i){
                    var text = d3.select(this).text();
                    if(text=='编辑'){
                        addEditOrg(viewId);
                        d3.select(this).text('取消编辑');
                    }else if(text=='取消编辑'){
                        removeEdit(viewId);
                        d3.select(this).text('编辑');
                    }else{
                        loadItem(i);
                    }
                });

        var svg = d3.select("#" + viewId)
                .append("svg").attr('width', outW - 10).attr('height', H)
                .attr('class', 'editSvg')
                .attr('transform', 'translate('+ W +', -'+ (H + 4) +')');

    }

    function removeEdit(viewId){
        var svg = d3.select("#" + viewId).select("svg.editSvg");
        svg.selectAll("*").remove();

        return svg;
    }

    function addEditOrg(viewId){
        var H = $("#" + viewId).height();
        var count = 14, dis = 10, barH = (H - count * dis - 6) / count;
        var svg = removeEdit(viewId);
        var data = [1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2];
        var enter = svg.selectAll("text").data(data).enter()
                .append("g")
                .attr('class', 'delCircle')
                .style('cursor', 'pointer')
                ;

        enter.append("circle")
                .style('fill', '#ff0000')//.style('stroke', '#000')
                .attr('r', 8)
                .attr('cx', 15)
                .attr('cy', function(d, i){ return i * (barH + dis) + barH/2; })

        enter.append("rect")
                .attr('x', 15 - 5)
                .attr('y', function(d, i){ return i * (barH + dis) + barH/2 - 1.5; })
                .attr('width', 10)
                .attr('height', 4)
                .style('fill', '#ffffff');

        enter.on('click', function(d, i){
            cout(d);
            __dts.splice(i, 1);
            loadGraphAll();


        });
    }






//    drawBarType("view1", source[1].data, source[1].names);

//
//    drawData("viewRT");

</script>

</body>
</html>
